import React, { Component } from 'react';
import swiperStyle from './swiperDialog.module.scss';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import * as imageActions from '@/store/actions/img';
import { Swiper, SwiperSlide } from 'swiper/react';
import SwiperCore, { Lazy } from 'swiper';
// Import Swiper styles
import 'swiper/swiper.scss';
SwiperCore.use([Lazy]);

class SwiperDialog extends Component {
    render() {
        let {activeIndex} = this.props;
        return (
            <div className={swiperStyle['swiper-wrap']} onClick={this.closeSwiper}>
                { <Swiper
                    onSlideChange={(swiper) => {
                        if(swiper.activeIndex >= this.props.categoryList.length-2){
                            this.props.getData(this.props.page+1);
                        }
                    }}
                    lazy={true}
                    initialSlide={activeIndex}
                    >
                    {this.props.categoryList.map((item,index) => {
                        return <SwiperSlide key={index}>slide1
                            <img className='swiper-lazy' data-src={item.Url.replace('{0}','3')} alt=""/>
                            <div className="swiper-lazy-preloader">
                                <img src={require('../../../static/bg.png')} alt="" style={{width:'50px'}}/>
                            </div>
                        </SwiperSlide>
                    })}
                </Swiper>}
            </div>
        )
    }

    //关闭swiper弹窗
    closeSwiper = () => {
        this.props.changeSwiper(false);
    }
    
}


let stateMapToProps = (state) => {
    return {
        categoryList:state.img.categoryList,
        activeIndex:state.img.activeIndex
    }
}

let dispatchMapToProps = (dispatch) => {
    return bindActionCreators(imageActions,dispatch)
}
export default connect(stateMapToProps,dispatchMapToProps)(SwiperDialog)
